<template>
  <div class="todo-footer">
    <label>
      <!-- <input type="checkbox" ref="c" @click="isAll"/> -->
      <input type="checkbox" v-model="isall"/>
    </label>
    <span> <span>已完成{{doneTotal}}</span> / 全部{{total}} </span>
    <button class="btn btn-danger" @click="delall">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "footer",
  props: ["lists","checkallobj","delallobj"],
  computed: {
    //总数
    total(){
      return this.lists.length
    },
    //已完成
    doneTotal(){
     //使用reduce方法做条件统计
    //  const x=this.lists.reduce((pre,current)=>{
    //      return pre + (current.done? 1: 0)
    //  },0)//默认0
     //简写
     return this.lists.reduce((pre,current)=>pre + (current.done? 1: 0),0)
    },
    isall:{
      //全选框是否要勾选
      get(){
        return this.doneTotal===this.total && this.total>0
      },
      //修改时会传修改之后的值给set
      set(value){
        //this.checkallobj(value)
        this.$emit("checkallobj", value)
      }
    }
  },
  methods: {
    // isAll(){
    //   this.checkallobj(this.$refs.c.checked)
    // },
    delall(){
      //this.delallobj()
      this.$emit('delallobj')    
    }
  }
};
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>